<template>
  <el-container class="map_component">
    <div class="input_area">
      <el-input placeholder="经纬度坐标" v-model="lnglat"></el-input>
      <el-button @click="submitPos" style="margin-left:10px">选定坐标</el-button>
    </div>
    <div class="result-panel">
      <el-autocomplete
        placeholder="请输入内容"
        :value-key="'name'"
        :fetch-suggestions="autoComplete"
        @select="selectAddress"
        v-model="address"
      >
        <!-- <template slot="append"><el-button slot="append" icon="el-icon-search"></el-button></template> -->
      </el-autocomplete>
    </div>
    <div class="map_area">
      <amap :zoom="15" :center="position" @click="mapClick">
        <amap-marker :position="position" draggable @dragend="getPos" />
      </amap>
    </div>
  </el-container>
</template>

<script>
import { loadAmap, loadPlugins } from "@amap/amap-vue";

export default {
  name: "AMapChoose",
  data() {
    return {
      address: "",
      lnglat: "",
      position: [120.670565, 28.001373]
    };
  },
  created() {
    this.$ready = new Promise(async resolve => {
      const AMap = await loadAmap();
      await loadPlugins(["AMap.PlaceSearch", "AMap.AutoComplete"]);
      this.ac = new AMap.AutoComplete();
      resolve();
    });
  },
  mounted() {
    this.position = this.pos;
  },
  props: {
    pos: {
      type: Array,
      default: []
    }
  },
  methods: {
    //拖动结束获取坐标
    getPos(pos) {
      if (pos) {
        this.position = [pos.lnglat.lng, pos.lnglat.lat];
        this.lnglat = pos.lnglat.lng + "," + pos.lnglat.lat;
      }
    },
    //根据地址模糊查询结果
    async autoComplete(kw, cb) {
      if (!kw) {
        cb([]);
      } else {
        this.ac.search(kw, (status, result) => {
          //console.log(result)
          if (result.tips) {
            cb(result.tips);
          } else {
            cb([]);
          }
        });
      }
    },
    //点击查询结果
    selectAddress(item) {
      if (item.location) {
        this.lnglat = item.location.lng + "," + item.location.lat;
        const pos = [item.location.lng, item.location.lat];
        this.position = [...pos];
      } else {
      }
    },
    //地图点击事件
    mapClick(e) {
      if (e.lnglat) {
        this.position = [e.lnglat.lng, e.lnglat.lat];
        this.lnglat = e.lnglat.lng + "," + e.lnglat.lat;
      } else {
        //this.position = null;
      }
    },
    //确定选择坐标并关闭窗口
    submitPos() {
      this.$emit("submitClose", this.position);
    }
  }
};
</script>

<style lang="scss" scoped>
.map_component {
  width: 100%;
  background: #fff;
  flex-direction: column;
  position: relative;

  .input_area {
    width: 260px;
    flex-direction: row;
    position: absolute;
    display: flex;
    right: 15px;
    top: 15px;
    z-index: 10;
  }

  .map_area {
    width: 100%;
    height: 500px;
  }

  .result-panel {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 280px;
    display: flex;
    flex-direction: column;
    z-index: 10;
  }
}
</style>
